﻿@using CleanArchitecture.Core.Helper
@using CleanArchitecture.Infrastructure.Interfaces
@using CleanArchitecture.Infrastructure.Entities.Business
@using CleanArchitecture.Infrastructure.Entities.Settings;
@inject SeoSettings seoSettings
@model ISettings
@{
    Layout = "_BackendLayout";
    ViewData["Title"] = "站点信息编辑";
    ClientSiteSettings clientSettingsModel = null;
    if (Model is ClientSiteSettings)
        clientSettingsModel = Model as ClientSiteSettings ?? null;
    else if (Model is ClientSiteMobileSettings)
        clientSettingsModel = Model as ClientSiteMobileSettings ?? null;
    int datatype = (int)ViewBag.DataType;
}
@section cssstyles {
    <style type="text/css">
        .layui-form-switch { margin-top: 6px; height: 25px; }
        .imguploader > .ant-upload { width: 146px; height: 146px; }
        .imguploader img { width: 128px; height: 128px; }
        .ant-upload-select-picture-card i { font-size: 32px; color: #999; }
        .ant-upload-select-picture-card .ant-upload-text { margin-top: 8px; color: #666; }
    </style>
}
@section csslinks {
    <link rel="stylesheet" href="https://unpkg.com/ant-design-vue@1.5.1/dist/antd.min.css">
    <link rel="stylesheet" type="text/css" href="~/lib/jQueryTagsInput/dist/jquery.tagsinput.min.css" />
}
<form action="" class="layui-form" id="clientapp">
    <div class="layui-tab">
        <ul class="layui-tab-title">
            <li class="layui-this">站点基本信息</li>
            <li class="">公司信息</li>
            <li class="">第三方</li>
        </ul>
        <div class="layui-tab-content">
            <!--站点基本信息-->
            <div class="layui-tab-item layui-show">
                <div class="layui-form-item">
                    <label class="layui-form-label">@(ReflectionExtensions.GetPropertyDisplayName<ClientSiteSettings>(m => m.WebsiteName))</label>
                    <div class="layui-input-block">
                        <input type="text" name="@clientSettingsModel.nameof(m => m.WebsiteName)" value="@clientSettingsModel.WebsiteName" lay-verify="required" lay-vertype="tips" autocomplete="off" placeholder="请输入站点名称" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">@(ReflectionExtensions.GetPropertyDisplayName<ClientSiteSettings>(m => m.WebsiteHostUrl))</label>
                    <div class="layui-input-block">
                        <input type="text" name="@clientSettingsModel.nameof(m => m.WebsiteHostUrl)" value="@clientSettingsModel.WebsiteHostUrl" lay-verify="required" lay-vertype="tips" autocomplete="off" placeholder="请输入站点域名" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">@(ReflectionExtensions.GetPropertyDisplayName<ClientSiteSettings>(m => m.WebsiteLogo))</label>
                    <div class="layui-input-block">
                        <a-upload name="Form.Files"
                                  accept="image/*"
                                  list-type="picture-card"
                                  class="imguploader"
                                  :show-upload-list="false"
                                  action="/api/backend/business/resourceupload"
                                  :data="logoimgdata"
                                  :before-upload="beforeUpload"
                                  @@change="handlelogoimgChange">
                            <img v-if="logoimageurl" :src="logoimageurl" alt="logo" />
                            <div v-else>
                                <a-icon :type="loading ? 'loading' : 'plus'" />
                            </div>
                        </a-upload>
                        <input type="text" name="@clientSettingsModel.nameof(m => m.WebsiteLogo)" value="@clientSettingsModel.WebsiteLogo" class="layui-hide" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">@(ReflectionExtensions.GetPropertyDisplayName<ClientSiteSettings>(m => m.WebsiteICP))</label>
                    <div class="layui-input-block">
                        <input type="text" name="@clientSettingsModel.nameof(m => m.WebsiteICP)" value="@clientSettingsModel.WebsiteICP" autocomplete="off" placeholder="请输入站点网站备案号" class="layui-input" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">@(ReflectionExtensions.GetPropertyDisplayName<ClientSiteSettings>(m => m.WebsitePICP))</label>
                    <div class="layui-input-block">
                        <input type="text" name="@clientSettingsModel.nameof(m => m.WebsitePICP)" value="@clientSettingsModel.WebsitePICP" autocomplete="off" placeholder="请输入站点公安备案号" class="layui-input" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">@(ReflectionExtensions.GetPropertyDisplayName<ClientSiteSettings>(m => m.Copyright))</label>
                    <div class="layui-input-block">
                        <textarea name="@clientSettingsModel.nameof(m => m.Copyright)" placeholder="版权信息，支持Html" class="layui-textarea">@clientSettingsModel.Copyright</textarea>
                    </div>
                </div>
                <fieldset class="layui-elem-field layui-field-title">
                    <legend>
                        <i class="layui-icon layui-icon-component"></i>SEO
                    </legend>
                </fieldset>
                <div class="layui-form-item">
                    <label class="layui-form-label">@(ReflectionExtensions.GetPropertyDisplayName<ClientSiteSettings>(m => m.MetaTitle))</label>
                    <div class="layui-input-block">
                        <input type="text" name="@clientSettingsModel.nameof(m => m.MetaTitle)" value="@(string.IsNullOrEmpty(clientSettingsModel.MetaTitle) ? seoSettings.DefaultTitle : clientSettingsModel.MetaTitle)" autocomplete="off" placeholder="请输入页面标题" class="layui-input" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">@(ReflectionExtensions.GetPropertyDisplayName<ClientSiteSettings>(m => m.MetaKeywords))</label>
                    <div class="layui-input-block">
                        <textarea name="@clientSettingsModel.nameof(m => m.MetaKeywords)" placeholder="请输入页面关键字，最多100个字符，关键字以逗号分隔" class="layui-textarea">@(string.IsNullOrEmpty(clientSettingsModel.MetaKeywords) 
                               ? string.Join(",", seoSettings.DefaultMetakeywords.ToArray())
                               : clientSettingsModel.MetaKeywords)</textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">@(ReflectionExtensions.GetPropertyDisplayName<ClientSiteSettings>(m => m.MetaDescription))</label>
                    <div class="layui-input-block">
                        <textarea name="@clientSettingsModel.nameof(m => m.MetaDescription)" placeholder="请输入页面描述" class="layui-textarea">@(string.IsNullOrEmpty(clientSettingsModel.MetaDescription) ? seoSettings.DefaultMetaDescription : clientSettingsModel.MetaDescription)</textarea>
                    </div>
                </div>
                <fieldset class="layui-elem-field layui-field-title">
                    <legend>
                        <i class="layui-icon layui-icon-unlink"></i>关闭网站
                    </legend>
                </fieldset>
                <div class="layui-form-item">
                    <label class="layui-form-label">@(ReflectionExtensions.GetPropertyDisplayName<ClientSiteSettings>(m => m.ShutdownWebsite))</label>
                    <div class="layui-input-block">
                        <input type="checkbox" name="@clientSettingsModel.nameof(m => m.ShutdownWebsite)" lay-skin="switch" lay-text="是|否" @if (clientSettingsModel.ShutdownWebsite) { <text> checked</text> } />
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">@(ReflectionExtensions.GetPropertyDisplayName<ClientSiteSettings>(m => m.ReasonforShutdown))</label>
                        <div class="layui-input-block">
                            <textarea name="@clientSettingsModel.nameof(m => m.ReasonforShutdown)" placeholder="请输入关闭原因" class="layui-textarea">@clientSettingsModel.ReasonforShutdown</textarea>
                        </div>
                    </div>
                </div>
            </div>
            <!--公司信息-->
            <div class="layui-tab-item">
                <div class="layui-form-item">
                    <label class="layui-form-label">@(ReflectionExtensions.GetPropertyDisplayName<ClientSiteSettings>(m => m.CompanyInfo_Tel))</label>
                    <div class="layui-input-block">
                        <input type="text" name="@clientSettingsModel.nameof(m => m.CompanyInfo_Tel)" value="@clientSettingsModel.CompanyInfo_Tel" autocomplete="off" placeholder="（选填）公司电话" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">@(ReflectionExtensions.GetPropertyDisplayName<ClientSiteSettings>(m => m.CompanyInfo_Fax))</label>
                    <div class="layui-input-block">
                        <input type="text" name="@clientSettingsModel.nameof(m => m.CompanyInfo_Fax)" value="@clientSettingsModel.CompanyInfo_Fax" autocomplete="off" placeholder="（选填）公司传真" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">@(ReflectionExtensions.GetPropertyDisplayName<ClientSiteSettings>(m => m.CompanyInfo_Email))</label>
                    <div class="layui-input-block">
                        <input type="text" name="@clientSettingsModel.nameof(m => m.CompanyInfo_Email)" value="@clientSettingsModel.CompanyInfo_Email" lay-verify="emailwhennotnull" autocomplete="off" placeholder="（选填）联系邮箱" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">@(ReflectionExtensions.GetPropertyDisplayName<ClientSiteSettings>(m => m.CompanyInfo_Address))</label>
                    <div class="layui-input-block">
                        <input type="text" name="@clientSettingsModel.nameof(m => m.CompanyInfo_Address)" value="@clientSettingsModel.CompanyInfo_Address" autocomplete="off" placeholder="（选填）联系地址" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">@(ReflectionExtensions.GetPropertyDisplayName<ClientSiteSettings>(m => m.CompanyInfo_QQ))</label>
                    <div class="layui-input-block">
                        <input type="text" name="@clientSettingsModel.nameof(m => m.CompanyInfo_QQ)" lay-verify="numberwhennotnull" value="@clientSettingsModel.CompanyInfo_QQ" autocomplete="off" placeholder="（选填）客服QQ" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">@(ReflectionExtensions.GetPropertyDisplayName<ClientSiteSettings>(m => m.CompanyInfo_MapPoint))</label>
                    <div class="layui-input-block">
                        <input type="text" name="@clientSettingsModel.nameof(m => m.CompanyInfo_MapPoint)" value="@clientSettingsModel.CompanyInfo_MapPoint" autocomplete="off" placeholder="（选填）公司地图坐标" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">
                        <a href="http://api.map.baidu.com/lbsapi/getpoint/index.html" title="百度地图坐标拾取API" target="_blank">百度地图坐标拾取</a>
                    </div>
                </div>
            </div>
            <!--第三方-->
            <div class="layui-tab-item">
                <div class="layui-form-item">
                    <label class="layui-form-label">@(ReflectionExtensions.GetPropertyDisplayName<ClientSiteSettings>(m => m.QRCode_Weixin))</label>
                    <div class="layui-input-block">
                        <a-upload name="Form.Files"
                                  accept="image/*"
                                  list-type="picture-card"
                                  class="imguploader"
                                  :show-upload-list="false"
                                  action="/api/backend/business/resourceupload"
                                  :data="wximgdata"
                                  :before-upload="beforeUpload"
                                  @@change="handlewximgChange">
                            <img v-if="weixinimageurl" :src="weixinimageurl" alt="qrcode" />
                            <div v-else>
                                <a-icon :type="loading ? 'loading' : 'plus'" />
                            </div>
                        </a-upload>
                        <input type="text" name="@clientSettingsModel.nameof(m => m.QRCode_Weixin)" value="@clientSettingsModel.QRCode_Weixin" class="layui-hide" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">@(ReflectionExtensions.GetPropertyDisplayName<ClientSiteSettings>(m => m.QRCode_Weibo))</label>
                    <div class="layui-input-block">
                        <a-upload name="Form.Files"
                                  accept="image/*"
                                  list-type="picture-card"
                                  class="imguploader"
                                  :show-upload-list="false"
                                  action="/api/backend/business/resourceupload"
                                  :data="wbimgdata"
                                  :before-upload="beforeUpload"
                                  @@change="handlewbimgChange">
                            <img v-if="weiboimageurl" :src="weiboimageurl" alt="qrcode" />
                            <div v-else>
                                <a-icon :type="loading ? 'loading' : 'plus'" />
                            </div>
                        </a-upload>
                        <input type="text" name="@clientSettingsModel.nameof(m => m.QRCode_Weibo)" value="@clientSettingsModel.QRCode_Weibo" class="layui-hide" />
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-hide">
        <button lay-submit="" id="clientSettingsSubmit" lay-filter="clientSettingsSubmit" class="layui-btn">保存</button>
    </div>
</form>

@section scripts{
    <script src="https://unpkg.com/ant-design-vue@1.5.1/dist/antd.min.js"></script>
    <script src="~/lib/jQueryTagsInput/dist/jquery.tagsinput.min.js"></script>
    <script type="text/javascript">
        $(function () {
            'use strict';
            layui.use(['form', 'notice', 'layedit'], function () {
                var form = layui.form,
                    notice = Util.notice !== null && Util.notice() !== null
                        ? Util.notice() : layui.notice,
                    layedit = layui.layedit;
                let lodash = _,
                    copyrightEdit = null;
                var initPageComponent = function () {
                    //textarea 版权信息(Copyright)绑定layedit
                    $("textarea[name=Copyright]").each(function () {
                        copyrightEdit = layedit.build(this, {
                            height: 120,
                            tool: []
                        });
                    });
                    //Metakeywords 页面关键字设置标签显示
                    $("textarea[name=MetaKeywords]").each(function () {
                        $(this).tagsInput({
                            'width': 'auto',
                            'height': '120px',
                            'defaultText': '添加',
                            'removeWithBackspace': true,
                            'onAddTag': null
                        });
                    });
                    if (parent.reinitIframe) {
                        parent.reinitIframe();
                    }
                };

                form.verify({
                    emailwhennotnull: function (value) {
                        if (lodash.trim(value) !== "") {
                            if (!Util.validateEmail(value)) {
                                return '填写邮箱格式不正确';
                            }
                        }
                    },
                    numberwhennotnull: function (value) {
                        if (lodash.trim(value) !== "") {
                            if (!Util.isNumber(value)) {
                                return '只能填写数字';
                            }
                        }
                    }
                });      
                form.on('submit(clientSettingsSubmit)', function (data) {
                    //console.log(data.field);
                    var index = layer.load(2, { time: 10 * 1000 }),
                        postJson = data.field;
                    if (postJson.hasOwnProperty('Copyright'))
                        postJson.Copyright = layedit.getContent(copyrightEdit);
                    httpapi.fetchPost('/api/system/websitemanage/edit?datatype=@datatype', data.field).then(res => {
                        layer.close(index);
                        if (!httpapi.checkResponse(res))
                            //输入信息校验错误
                            notice.error(res.message);
                        else //Success
                            notice.success(res.message);
                    }).catch(error => {
                        notice.error("对不起，出现未知错误，请您联系系统管理员！");
                        console.log(error);
                    });
                    return false; 
                });
                var vm = new Vue({
                    el: '#clientapp',
                    data: {
                        loading: false,
                        logoimageurl: '',
                        weixinimageurl: '',
                        weiboimageurl: '',
                        logoimgdata: {
                            Id: 0,
                            TitleAttribute: "Website logo image",
                            Category: "@nameof(UploadUseCategory.ClientSettingImage)",
                        },
                        wximgdata: {
                            Id: 0,
                            TitleAttribute: "Website Weixin image",
                            Category: "@nameof(UploadUseCategory.ClientSettingImage)",
                        },
                        wbimgdata: {
                            Id: 0,
                            TitleAttribute: "Website Weibo image",
                            Category: "@nameof(UploadUseCategory.ClientSettingImage)",
                        },
                    },
                    mounted: function () {
                        var me = this;
                        me.$nextTick(function () {
                            initPageComponent();
                            me.getImgUploadData();
                        });
                    },
                    methods: {
                        handleChange: function (info, inputEl) {
                            if (info.file.status === 'uploading') {
                                this.loading = true;
                                return;
                            }
                            if (info.file.status === 'done') {
                                this.loading = false;
                                let serverResp = (typeof info.file.response === "string")
                                    ? JSON.parse(info.file.response)
                                    : info.file.response;
                                if (serverResp.state !== 200) {
                                    notice.error(serverResp.message);
                                    return;
                                }
                                inputEl.val(serverResp.data.FileUploadId + ";" + serverResp.data.FileUrl);
                                this.getImgUploadData();
                                notice.success("图片上传成功，请注意提交保存，否则设置信息不会被保存");
                            }
                        },
                        handlelogoimgChange: function (info) {
                            let $logoimgurl = $("input[name=@clientSettingsModel.nameof(m => m.WebsiteLogo)");
                            this.handleChange(info, $logoimgurl);
                        },
                        handlewximgChange: function (info) {
                            let $wximgurl = $("input[name=@clientSettingsModel.nameof(m => m.QRCode_Weixin)");
                            this.handleChange(info, $wximgurl);
                        },
                        handlewbimgChange: function (info) {
                            let $wbimgurl = $("input[name=@clientSettingsModel.nameof(m => m.QRCode_Weibo)");
                            this.handleChange(info, $wbimgurl);
                        },
                        getImgUploadData: function () {
                            let $logoimgurl = $("input[name=@clientSettingsModel.nameof(m => m.WebsiteLogo)"),
                                $wximgurl = $("input[name=@clientSettingsModel.nameof(m => m.QRCode_Weixin)"),
                                $wbimgurl = $("input[name=@clientSettingsModel.nameof(m => m.QRCode_Weibo)"),
                                me = this;
                            let urlArr = [];
                            if (lodash.trim($logoimgurl.val()) !== "") {
                                urlArr = lodash.split($logoimgurl.val(), ';', 2);
                                me.logoimgdata.Id = urlArr[0];
                                me.logoimageurl = urlArr[1];
                            }
                            if (lodash.trim($wximgurl.val()) !== "") {
                                urlArr = lodash.split($wximgurl.val(), ';', 2);
                                me.wximgdata.Id = urlArr[0];
                                me.weixinimageurl = urlArr[1];
                            }
                            if (lodash.trim($wbimgurl.val()) !== "") {
                                urlArr = lodash.split($wbimgurl.val(), ';', 2);
                                me.wbimgdata.Id = urlArr[0];
                                me.weiboimageurl = urlArr[1];
                            }
                        },
                        beforeUpload: function (file) {
                            this.getImgUploadData();
                            const isLt1M = file.size / 1024 / 1024 < 1;
                            if (!isLt1M) {
                                notice.error('上传图片限制：文件大小不能超过1M!');
                            }
                            return isLt1M;
                        }
                    },
                });
            });
        });
    </script>
}